<template>
  <div>
    <header class="home-header">
      <div class="home-logo">
        <img src="@/assets/image/home/Logo.png" alt="logo" />
      </div>
      <div class="search-login">
        <!-- <div>search</div> -->
        <button
          class="primary-btn"
          @click="
            LoginVisible = true;
            isLogin: true;
          "
        >
          Log in
        </button>
        <button
          style="margin: 0 22px"
          class="primary-btn"
          @click="
            LoginVisible = true;
            isLogin: false;
          "
        >
          Sign up
        </button>
      </div>
    </header>
    <nav class="home-nav">
      <ul>
        <li>Home Decor</li>
        <li>Furniture</li>
        <li>Lighting</li>
        <li>Home Accents</li>
        <li>Rugs</li>
        <li>Outdoors</li>
        <li>Holidays</li>
        <li>Gifts</li>
        <li>Events</li>
      </ul>
    </nav>
    <article class="home-article">
      <!-- 顶部图片 start -->
      <section class="default-image">
        <p class="content-text">
          We have dream to connect wholesalers to independent Customers
          <br /><button class="into-btn">Explore</button>
        </p>
        <img src="@/assets/image/home/defaultImage.png" alt="defaultImage" />
        <div class="carousel">
          <img
            class="leftArrow"
            src="@/assets/image/home/leftArrow.png"
            alt="leftArrow"
            @click="swapImg(false)"
          />
          <div ref="bannerWrapper" class="banner-wrapper">
            <ul ref="banner">
              <li v-for="item in 8" :key="item">
                <div class="show-list-img">
                  <img
                    src="@/assets/image/home/defaultImage.png"
                    alt="defaultImage"
                  />
                </div>
                <p>Makeup</p>
              </li>
            </ul>
          </div>
          <img
            class="rightArrow"
            src="@/assets/image/home/rightArrow.png"
            alt="rightArrow"
            @click="swapImg(true)"
          />
        </div>
      </section>
      <!-- 顶部图片 end -->
      <!-- 内容区域 start -->
      <section class="content-wrapper">
        <!--  -->
        <article class="top-seller">
          <p class="seller-title">Top Seller</p>
          <section class="product-items">
            <productWrapperVue
              v-for="item in 3"
              :key="item"
              :width="380"
              :height="380"
              type="Cyrusshare"
              name="SAVA DECK300 Mountain Bike 29"
              money="1,399.99"
            />
          </section>
          <div class="more-wrapper">
            <a class="to-more" href="#" @click.prevent>Explore More ></a>
          </div>
        </article>

        <article class="problem">
          <section>
            <p>Why Become Buyer?</p>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor. Aenean massa. Cum sociis natoque
              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
              Donec quam feliultricies nec, pellentesque eu, pretium quis, sem.
              Nulla consequat massa quis enim.
            </p>
            <button class="into-btn">Apply to Buy</button>
          </section>
          <aside>
            <img src="@/assets/image/home/defaultImage.png" alt="problem" />
          </aside>
        </article>

        <article class="problem">
          <aside>
            <img src="@/assets/image/home/defaultImage.png" alt="problem" />
          </aside>
          <section>
            <p>Why Become Buyer?</p>
            <p>
              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
              commodo ligula eget dolor. Aenean massa. Cum sociis natoque
              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
              Donec quam feliultricies nec, pellentesque eu, pretium quis, sem.
              Nulla consequat massa quis enim.
            </p>
            <button class="into-btn">Apply to Buy</button>
          </section>
        </article>

        <article class="more-product-wrapper">
          <section class="list-wrapper">
            <div class="list-item">
              <productWrapperVue
                style="margin-bottom: 70px"
                :width="606"
                :height="542"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
            </div>
            <div
              class="min-product-wrapper list-item"
              v-for="item in 5"
              :key="item"
            >
              <productWrapperVue
                :width="269"
                :height="294"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
              <productWrapperVue
                :width="269"
                :height="294"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
            </div>
            <div class="list-item">
              <productWrapperVue
                style="margin-bottom: 70px"
                :width="606"
                :height="542"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
            </div>
            <div class="min-product-wrapper list-item">
              <productWrapperVue
                :width="269"
                :height="294"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
              <productWrapperVue
                :width="269"
                :height="294"
                type="Cyrusshare"
                name="SAVA DECK300 Mountain Bike 29"
                :minText="true"
                money="1,399.99"
              />
            </div>
          </section>
        </article>
      </section>
      <!-- 内容区域 end -->
    </article>
    <footer class="home-footer">
      <section>
        <ul class="footer-items">
          <li>How We Help</li>
          <li>Retailers</li>
          <li>Interiors Designers</li>
          <li>Product Designers</li>
          <li>Wholesalers / Importers</li>
          <li>Artisans</li>
        </ul>
        <ul class="footer-items">
          <li>Get to Know Us</li>
          <li>About</li>
          <li>Policies</li>
          <li>Careers</li>
          <li>Press</li>
        </ul>
        <ul class="footer-items">
          <li>Join the Community</li>
          <li>Upcoming Events</li>
          <li>Become a Buyer</li>
          <li>Become a Seller</li>
        </ul>
        <ul class="footer-items">
          <li>Facebook</li>
          <li>Retailers</li>
          <li>Pinterest</li>
          <li>Twitter</li>
          <li>Instagram</li>
        </ul>
      </section>
      <div class="footer-sign">Author: Fenglekai</div>
    </footer>

    <!-- login弹窗 -->
    <el-dialog v-model="LoginVisible" :width="502" center>
      <div style="position: relative; height: 350px">
        <div ref="loginWrapper" class="login-wrapper">
          <img
            class="home-logo"
            src="@/assets/image/home/Logo.png"
            alt="login-logo"
          />
          <el-form ref="loginFormRef" :model="loginForm" :rules="rules">
            <el-form-item>
              <el-input
                class="form-input"
                v-model="loginForm.username"
                placeholder="Username/Email Address"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                class="form-input"
                v-model="loginForm.password"
                placeholder="Password"
              ></el-input>
            </el-form-item>
            <div class="login-text">
              <el-checkbox
                class="remember-btn"
                v-model="remember"
                label="Keep me Logged in"
              ></el-checkbox>
              <span class="text-span">Forgot Password?</span>
            </div>
            <div>
              <button
                style="margin-right: 17px"
                class="into-btn"
                type="submit"
                @click.prevent="toLogin"
              >
                Log in
              </button>
              <button class="primary-btn">Log in as a Guest</button>
            </div>
          </el-form>
        </div>
        <div style="display: none" ref="registerWrapper" class="login-wrapper">
          <img
            class="home-logo"
            src="@/assets/image/home/Logo.png"
            alt="login-logo"
          />
          <el-form ref="registerForm" :model="registerForm">
            <el-form-item>
              <el-input
                class="form-input"
                v-model="registerForm.username"
                placeholder="Username"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                class="form-input"
                v-model="registerForm.fullName"
                placeholder="Full Name"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                class="form-input"
                v-model="registerForm.email"
                placeholder="Email Address"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-input
                class="form-input"
                v-model="registerForm.password"
                placeholder="Password"
              ></el-input>
            </el-form-item>
            <div>
              <button class="into-btn">Create Account</button>
            </div>
          </el-form>
        </div>
      </div>
      <template #footer>
        <div v-show="isLogin" class="login-footer">
          <span style="margin-right: 18px">Not have an Account?</span>
          <button class="primary2-btn" @click="switchForm">Register</button>
        </div>
        <div v-show="!isLogin" class="login-footer">
          <span style="margin-right: 18px">Already have an Account?</span>
          <button class="primary2-btn" @click="switchForm">Log in</button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, watch, computed, defineComponent } from "vue";
import productWrapperVue from "@/components/productWrapper.vue";
import { login } from "@/api/login";
import type { ElForm } from 'element-plus'
export default defineComponent({
  components: {
    productWrapperVue,
  },
  setup(props: any, context: any) {
    const state = reactive({
      message: "home",
      bannerIndex: 0,
      LoginVisible: false,
      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        fullName: "",
        email: "",
        password: "",
      },
      remember: false,
      isLogin: true,
    });
    const bannerWrapper: any = ref(0);
    const banner: any = ref(0);
    const loginWrapper: any = ref(null);
    const registerWrapper: any = ref(null);
    const loginFormRef = ref<InstanceType<typeof ElForm>>()
    const rules = reactive({
      username: [
        {
          required: true,
          message: 'Please input username',
          trigger: 'blur'
        },
        {
          max: 10,
          message: 'Length should be less than 10',
          trigger: 'blur'
        }
      ],
      password: [
        {
          required: true,
          message: 'Please input password',
          trigger: 'blur'
        },
        {
          max: 10,
          message: 'Length should be less than 10',
          trigger: 'blur'
        }
      ]
    })
    // 轮播图js实现
    const swapImg = (tag: boolean) => {
      // console.log(bannerWidth.value);
      // console.log(Math.abs(state.bannerIndex * 290));
      if (tag) {
        if (bannerWidth.value <= Math.abs(state.bannerIndex * 290))
          return alert("后面没有图片了");
        state.bannerIndex -= 1;
      } else {
        if (Math.abs(state.bannerIndex * 290) === 0)
          return alert("前面没有图片了");
        state.bannerIndex += 1;
      }
      banner.value.style.left = state.bannerIndex * 290 + "px";
    };
    // 登录注册转化
    const switchForm = () => {
      if (state.isLogin) {
        loginWrapper.value.style.opacity = 0;
        setTimeout(() => {
          loginWrapper.value.style.display = "none";
          registerWrapper.value.style.display = "block";
          registerWrapper.value.style.opacity = 1;
        }, 300);
      } else {
        registerWrapper.value.style.opacity = 0;
        setTimeout(() => {
          registerWrapper.value.style.display = "none";
          loginWrapper.value.style.display = "block";
          loginWrapper.value.style.opacity = 1;
        }, 300);
      }

      state.isLogin = !state.isLogin;
    };
    // 登录
    const toLogin = () => {
      loginFormRef.value.validate().then((boolean, object) => {
        if (boolean) {
          const { username, password } = state.loginForm
          console.log('username', username)
          console.log('password', password)
          return
          login(username, password)
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log(object)
        }
      })
    };
    watch(
      () => state,
      (newVal, oldVal) => {
        console.log(111);
        console.log(newVal);
      }
    );
    const bannerWidth = computed(() => {
      const width = banner.value.offsetWidth - bannerWrapper.value.offsetWidth;
      return width;
    });
    return {
      ...toRefs(state,rules),
      swapImg,
      banner,
      bannerWrapper,
      bannerWidth,
      switchForm,
      toLogin,
      loginWrapper,
      registerWrapper,
      loginFormRef,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/style/global.scss";

.home-header {
  width: 100vw;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-content: center;

  .home-logo {
    margin: 0 80px;
    line-height: 100px;
    font-size: 0;

    img {
      vertical-align: middle;
    }
  }

  .search-login {
    line-height: 100px;
  }
}

.home-nav {
  width: calc(100vw - 160px);
  height: 45px;
  background-color: rgba(244, 244, 244, 1);
  padding: 0 80px;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 45px;

    li {
      display: inline-block;
      cursor: pointer;
      transition: 0.3s;
      padding: 0 12px;

      &:hover {
        color: #ffffff;
        background-color: $primary-color;
      }
    }
  }
}

.home-article {
  .default-image {
    position: relative;
    padding-bottom: 200px;

    .content-text {
      position: absolute;
      text-align: center;
      width: 800px;
      color: $white;
      font-size: 50px;
      top: 28%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    img {
      width: 100%;
      height: auto;
      max-height: 100%;
    }

    .carousel {
      width: calc(100% - 160px);
      height: 300px;
      background-color: #ffffff;
      position: absolute;
      bottom: -150px;
      left: 5%;
      transform: translateY(-50%);
      box-shadow: 0 0 68px rgb(9, 9, 9, 0.3);
      display: flex;
      justify-content: space-between;
      align-items: center;

      .leftArrow {
        width: 12px;
        height: 20px;
        margin-left: 30px;
        cursor: pointer;
      }

      .rightArrow {
        width: 12px;
        height: 20px;
        margin-right: 30px;
        cursor: pointer;
      }

      .banner-wrapper {
        width: calc(100% - 84px);
        margin-right: 30px;
        height: 100%;
        display: flex;
        align-items: center;
        overflow: hidden;
        position: relative;

        ul {
          margin: 0;
          padding: 0;
          list-style: none;
          display: flex;
          position: absolute;
          left: 0;
          transition: 0.5s;

          li {
            width: 250px;
            height: 259px;
            margin: 0 20px;
            text-align: center;

            .show-list-img {
              width: 250px;
              height: 200px;
              line-height: 200px;

              img {
                width: auto;
                height: auto;
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
              }
            }

            p {
              font-size: 18px;
              line-height: 60px;
            }
          }
        }
      }
    }
  }

  .content-wrapper {
    width: calc(100% - 160px);
    margin: 85px auto 0 auto;

    .top-seller {
      .seller-title {
        font-size: 30px;
        color: $primary-color;
        margin-bottom: 20px;
      }

      .product-items {
        display: flex;
        justify-content: space-between;

        .product-wrapper {
          width: 380px;
          height: 380px;
          border: 1px solid #e0e0e0;

          img {
            display: block;
            width: 100%;
            height: 280px;
          }

          .describe {
            height: 100px - 40px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            section {
              p:first-child {
                color: rgba(117, 117, 117, 1);
                font-size: 14px;
              }

              p:nth-child(2) {
                color: rgba(0, 0, 0, 1);
                font-size: 16px;
              }

              p:last-child {
                color: $primary-color;
                font-size: 19px;
              }
            }

            img {
              width: 15px;
              height: 23px;
              cursor: pointer;
            }
          }
        }
      }

      .more-wrapper {
        margin-top: 37px;
        text-align: center;

        .to-more {
          font-size: 16px;
          color: rgba(117, 117, 117, 1);
          text-decoration: none;
        }
      }
    }

    .problem {
      width: 100%;
      display: flex;
      align-items: center;
      margin-top: 130px;

      section {
        flex: 1;

        p:first-child {
          font-size: 30px;
          color: $primary-color;
          margin-bottom: 20px;
        }

        button:last-child {
          margin-top: 16px;
        }
      }

      aside {
        flex: 1;
        text-align: center;

        img {
          width: 379px;
          height: 241px;
        }
      }
    }

    .more-product-wrapper {
      margin-top: 156px;

      .list-wrapper {
        width: 1282px;
        margin: 0 auto;
        column-count: 2;
        column-gap: 70px;

        .list-item {
          // place-self: center center;
          break-inside: avoid;
        }

        .min-product-wrapper {
          display: flex;
          justify-content: space-between;
          margin-bottom: 70px;
        }
      }
    }
  }
}

.home-footer {
  width: calc(100% - 160px);
  margin: 30px auto 0 auto;

  section {
    display: flex;
    justify-content: space-evenly;

    .footer-items {
      list-style: none;

      li:first-child {
        font-size: 24px;
        color: rgba(28, 28, 27, 1);
      }

      li {
        font-size: 14px;
        color: rgba(28, 28, 27, 1);
        line-height: 30px;
      }
    }
  }

  .footer-sign {
    margin-top: 22px;
    padding: 19px 0 22px 0;
    text-align: center;
    border-top: 1px solid #c6c6c5;
  }
}

.login-wrapper {
  width: calc(100% - 50px);
  text-align: center;
  padding: 0 25px;
  transition: 0.3s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  .login-text {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;

    .remember-btn {
      --el-checkbox-checked-text-color: rgba(139, 195, 74, 1);
      --el-checkbox-checked-input-border-color: rgba(139, 195, 74, 1);
      --el-checkbox-checked-icon-color: rgba(139, 195, 74, 1);
      --el-checkbox-checked-bg-color: #ffffff;
      --el-checkbox-input-border-color-hover: rgba(139, 195, 74, 1);
      height: 20px;
    }

    .text-span {
      align-items: center;
      display: inline-flex;
      cursor: pointer;
    }
  }
}

.home-logo {
  width: 166px;
  height: 62px;
  margin-bottom: 18px;
}

.form-input {
  --el-input-focus-border: rgba(139, 195, 74, 1);
}

.login-footer {
  padding-top: 20px;
  border-top: 1px solid rgba(244, 244, 244, 1);
  transition: 0.3s;
}
</style>